<template>
    <div class="navigation-container">
        <div class="sidebar">
            <ul class="nav-list">
                <li v-for="category in categories" :key="category.id" class="nav-item"
                    :class="{ 'active': activeCategory === category.id }" @click="scrollToCategory(category.id)">
                    {{ category.name }}
                </li>
            </ul>
        </div>

        <div class="main-content">
            <h1>常用网站导航</h1>

            <!-- 技术博客分类 -->
            <h2 class="category-title" id="blog">技术博客</h2>
            <div class="cards-container">
                <div v-for="site in blogSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img :src="site.image" :alt="site.title" class="card-image"
                        :style="{ backgroundColor: site.imgBg || 'f9f8f8' }" />
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- IT技术网站分类 -->
            <h2 class="category-title" id="technology">IT技术网站</h2>
            <div class="cards-container">
                <div v-for="site in techSites" :key="site.id" class="card" @click="goToSite(site.url, site.route)">
                    <img :src="site.image" :alt="site.title" class="card-image"
                        :style="{ backgroundColor: site.imgBg || 'f9f8f8' }" />
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 代码托管分类 -->
            <h2 class="category-title" id="repository">代码托管</h2>
            <div class="cards-container">
                <div v-for="site in repoSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img v-if="site.image" :src="site.image" :alt="site.title" class="card-image" />
                    <div v-else class="card-image-def">
                        <p class="card-image-text">{{ site.title }}</p>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 素材&设计分类 -->
            <h2 class="category-title" id="design">素材&设计</h2>
            <div class="cards-container">
                <div v-for="site in designSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img v-if="site.image" :src="site.image" :alt="site.title" class="card-image"
                        :style="{ backgroundColor: site.imgBg || 'f9f8f8' }" />
                    <div v-else class="card-image-def">
                        <p class="card-image-text">{{ site.title }}</p>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 工具分类 -->
            <h2 class="category-title" id="tool">在线工具</h2>
            <div class="cards-container">
                <div v-for="site in toolSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img :src="site.image" :alt="site.title" class="card-image" />
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 在线文档分类 -->
            <h2 class="category-title" id="doc">在线文档</h2>
            <div class="cards-container">
                <div v-for="site in docSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img v-if="site.image" :src="site.image" :alt="site.title" class="card-image" />
                    <div v-else class="card-image-def">
                        <p class="card-image-text">{{ site.title }}</p>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 在线编程分类 -->
            <h2 class="category-title" id="programming">在线编程</h2>
            <div class="cards-container">
                <div v-for="site in programmingSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img v-if="site.image" :src="site.image" :alt="site.title" class="card-image"
                        :style="{ backgroundColor: site.imgBg || 'f9f8f8' }" />
                    <div v-else class="card-image-def">
                        <p class="card-image-text">{{ site.title }}</p>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>

            <!-- 求职分类 -->
            <h2 class="category-title" id="job">求职</h2>
            <div class="cards-container">
                <div v-for="site in jobSites" :key="site.id" class="card" @click="goToSite(site.url)">
                    <img v-if="site.image" :src="site.image" :alt="site.title" class="card-image"
                        :style="{ backgroundColor: site.imgBg || 'f9f8f8' }" />
                    <div v-else class="card-image-def">
                        <p class="card-image-text">{{ site.title }}</p>
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">{{ site.title }}</h3>
                        <p class="card-description">{{ site.description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { navigationSites, navigationCategories } from './data/navigationData';

export default {
    name: 'CommonNavigation',
    data() {
        return {
            categories: navigationCategories,
            sites: navigationSites,
            activeCategory: '',
            scrollTimer: null as unknown as number | null // 添加防抖定时器
        }
    },
    computed: {
        blogSites() {
            return this.sites.filter(site => site.category === 'blog');
        },
        techSites() {
            return this.sites.filter(site => site.category === 'technology');
        },
        repoSites() {
            return this.sites.filter(site => site.category === 'repository');
        },
        designSites() {
            return this.sites.filter(site => site.category === 'design');
        },
        toolSites() {
            return this.sites.filter(site => site.category === 'tool');
        },
        programmingSites() {
            return this.sites.filter(site => site.category === 'programming');
        },
        docSites() {
            return this.sites.filter(site => site.category === 'doc');
        },
        jobSites() {
            return this.sites.filter(site => site.category === 'job');
        }
    },
    mounted() {
        // 添加滚动事件监听器
        window.addEventListener('scroll', this.handleScroll);
        // 初始化时检测一次
        this.$nextTick(() => {
            this.handleScroll();
        });
    },
    beforeUnmount() {
        // 移除滚动事件监听器
        window.removeEventListener('scroll', this.handleScroll);
        // 清理定时器
        if (this.scrollTimer) {
            clearTimeout(this.scrollTimer);
        }
    },
    methods: {
        goToSite(url: string, route?: string) {
            if (route) {
                // 如果有路由，则跳转到路由对应的页面
                this.$router.push(route);
            } else if (url) {
                // 如果没有路由，则直接跳转链接
                window.open(url, '_blank');
            }
        },
        scrollToCategory(categoryId: string) {
            const element = document.getElementById(categoryId);
            if (element) {
                // 计算偏移量，避免被固定导航栏遮挡
                const offsetTop = 100;
                const elementPosition = element.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - offsetTop;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        },
        handleScroll() {
            // 防抖动，避免频繁触发
            if (this.scrollTimer) {
                clearTimeout(this.scrollTimer);
            }

            this.scrollTimer = setTimeout(() => {
                // 获取所有分类元素
                const categoryElements = this.categories.map(category =>
                    document.getElementById(category.id)
                ).filter(el => el !== null) as HTMLElement[];

                // 查找当前在视窗中的分类
                let currentCategory = '';

                // 找到第一个进入视口的分类作为当前分类
                for (let i = 0; i < categoryElements.length; i++) {
                    const element = categoryElements[i];
                    if (element) {
                        const rect = element.getBoundingClientRect();

                        // 考虑到固定导航的影响，我们使用一个偏移量
                        const offsetTop = 100;

                        // 判断元素是否在视窗中（顶部在视口中或刚刚滚过视口顶部）
                        if (rect.top <= offsetTop) {
                            // 添加类型检查以解决TS错误
                            const category = this.categories[i];
                            if (category) {
                                currentCategory = category.id;
                            }
                        }
                    }
                }

                // 更新当前激活的分类
                this.activeCategory = currentCategory;
            }, 100); // 100ms 防抖
        }
    }
}
</script>

<style scoped>
.navigation-container {
    display: flex;
    padding: 20px;
    max-width: 95%;
    margin: 0 auto;
}

.sidebar {
    width: 10%;
    min-width: 150px;
    padding-right: 20px;
    border-right: 1px solid #eee;
    position: fixed;
    top: 100px;
    /* 与内容的padding-top保持一致 */
    margin-right: 10px;
    height: fit-content;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    padding: 12px 15px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.nav-item:hover {
    background-color: #1ea34d;
    color: #fff;
}

.nav-item.active {
    color: #007bff;
    font-weight: bold;
}

.main-content {
    flex: 1;
    margin-left: 200px;
    padding-top: 20px;
}

.main-content h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.category-title {
    font-size: 24px;
    margin: 30px 0 15px 0;
    color: #333;
    border-left: 4px solid #007bff;
    padding-left: 10px;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.card-image {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 15px;
    background-color: #f9f8f8;
}

.card-image.special-bg {
    background-color: #e3f2fd;
}

.card-image-def {
    width: 100%;
    height: 120px;
    object-fit: contain;
    padding: 15px;
    background-color: #86f0b2;
    text-align: center;
}

.card-image-text {
    color: #000;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    height: 100%;
    width: 100%;
    align-content: center;
}

.card-content {
    padding: 15px;
}

.card-title {
    font-size: 16px;
    margin: 0 0 8px 0;
    color: #000;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-description {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1200px) {
    .cards-container {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 992px) {
    .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .navigation-container {
        flex-direction: column;
        padding-top: 20px;
        /* 移动端恢复原来的padding */
    }

    .sidebar {
        width: 100%;
        position: static;
        top: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .main-content {
        margin-left: 0;
        padding-top: 0;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .cards-container {
        grid-template-columns: 1fr;
    }
}
</style>